// import { getEle } from "./utils/utils.js"; //命名导入(不可以重命名)，用几个导入几个，前提已经导出了，加大括号 原生模块化需要文件名加扩展名
// import get from "./utils/utils.js"; //默认导入(可以重命名)，不需要加大括号
import getEle,{getTime}  from "./utils/utils.js";  //命名导出加模块导出在一个文件里
import bindEvent from "./utils/bindEvent.js";
import $ from "jquery"; // 如果没有webpack加上type="module"也会报错; 基于webpack编译完之后就可以用了全部打包成了bundle.js
console.log($)  //控制台打印出来的行数与本文件行数不一致,webpack.config.js中配置devtool: "source-map"
console.log(231)

// 一旦重新配置文件，则需要重新启动npm start

// 获取元素
// const addBtn = getEle(".add");
// const input = getEle("#input");
// const list1 = getEle(".list");
// 默认导入换名是也可以(getEle->get)
// const addBtn1 = get(".add");
// const input1 = get("#input");
// const list1 = get(".list");

// 添加功能--虽然看起来代码短了但是性能上并没有简化，因为每次添加都需要获取input,list
bindEvent(".add","click",function(){
    // 创建一个li元素
    const li = document.createElement("li");
    // 模板字符串
    li.innerHTML = `
        <input type="checkbox">
        <span>${getEle("#input").value}</span>
        <time>${getTime(Date.now())}</time>
        <i class="iconfont icon-shanchu"></i>
    `;
    getEle(".list").appendChild(li);
}) 

// 删除功能
bindEvent(".list","click",function(e){
    if(e.target.nodeName == "I"){
        this.removeChild(e.target.parentNode);
    } 
})